<template>
  <div @click="closeAllHistory" class="gq_dialog">
    <el-dialog title="工段编辑"
               :visible.sync="dialogTableVisible"
               :close-on-click-modal="clickModalHide"
               :fullscreen="true"
               :before-close="closeDialog">
      <span>
        <div class="sq-column" style="height: 450px;" @click="resetEdit">
          <div class="sq-colitem-fix fixcol">
            <div class="fixcol-content">
             <v-jstree :data="treeList" show-checkbox allow-batch whole-row @item-click="itemClick"></v-jstree>
            </div>
          </div><!-- /.bd-colitem-fixcol -->

          <div class="sq-colitem">
            <div class="classfiy-title">编辑对象</div>
            <table  border="1" bordercolor="#e2e2e4" style="border-collapse:collapse;width: 80%;margin-left: 10%">
              <tr v-if="chooseNode.root !== 0">
                <td height="29px" width="40%" @click.stop="editNode">
                   <span v-show="!chooseNode.edit" title="点击当前编辑" :style="{'color': chooseNode.root == 0 ? '#606266' : '#03a9f4','cursor': 'pointer'}"> {{chooseNode.text}}</span>
                   <el-input v-show="chooseNode.edit" placeholder="请输入" v-model="chooseNode.value" clearable></el-input>
                </td>
                <td v-if="chooseNode.root == 0" style="color: #bcbec2;background-color: #f4f4f5;;cursor: no-drop;">不可编辑</td>
                <td v-else>
                  可编辑
                </td>
              </tr>
              <tr v-for="(item,index) in chooseNode.children" :key="index">
                <td height="29px" width="40%" :rowspan="chooseNode.children.length" v-if="index == 0">{{chooseNode.root ==0?"工段":(chooseNode.root ==1?"工装":"工序")}}</td>
                <td height="29px" title="点击当前编辑" style="cursor:pointer;" @click.stop="editChildNode(item)">
                  <span v-show="!item.edit" style="color: #03a9f4;">{{item.text}}</span>
                  <div v-show="item.edit && chooseNode.root==1">
                    <label>工装名称</label>：
                    <el-input placeholder="请输入编号" v-model="item.value" clearable></el-input>
                    <br />
                    <label>代码</label>：
                    <el-input placeholder="代码为大写字母" v-model="item.value_1" onkeyup="value=value.replace(!/^[A-Z]+$/,'')" clearable></el-input>
                  </div>
                  <el-input v-show="item.edit && chooseNode.root!=1" placeholder="请输入"  v-model="item.value" clearable></el-input>
                </td>
              </tr>
            </table>
            <div v-show="chooseNode.root == 2" style="margin-left: 10%;margin-top: 20px">
              <!--<span>负责人：</span><input v-model="chooseNode.value_2">-->
              <span>负责人：</span><el-input style="width: 30% !important" v-model="chooseNode.value_2"
                         @keyup.native="selectItem($event)"></el-input>
              <div class="search-list-show" v-show="autoTip.length > 0 && tipShow" id="scrollElement_q">
                <ul class="choose-history" >
                  <li v-for="(item,index) in autoTip"
                      :key="index"
                      :class="{'active':currentIndex == index}"
                      @click="chooseTip(item)">{{item}}</li>
                </ul>
              </div>

            </div>
            <div style="text-align: center;margin-top: 20px">
              <el-button class="btn btn-general" style="background: #F56C6C;color: white" @click="deleteTreeNode" v-show="chooseNode.root != 0 &&(chooseNode.root!=1 ||type=='add')"><i class="fa fa-remove" aria-hidden="true"></i>&nbsp;{{chooseNode.root ==1?"删除工段":(chooseNode.root ==2?"删除工装":"删除工序")}}</el-button>
              <el-button class="btn btn-general" @click="addTreeNode" v-show="chooseNode.root < 3&&(chooseNode.root!=0||type=='add')"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;{{chooseNode.root ==0?"添加工段":(chooseNode.root ==1?"添加工装":"添加工序")}}</el-button>
            </div>
          </div>
        </div>
	      <div class="tips">
	      	<p>请编辑工段名称、工装名称及代码、工序名称，<span style="color: #03a9f4;">蓝色字体</span>均为可编辑项。</p>
	      	<p>工装代码必须为大写英文字母。</p>
	      </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn btn-general" @click="closeDialog">取 消</el-button>
        <el-button class="btn btn-confirm" type="primary" @click="saveGongduan">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
  import VJstree from 'vue-jstree'
  export default {
    name: 'shareArchive',
    data() {
      return {
        dialogTableVisible: false,
        clickModalHide: false,
        //树
        treeList: [],
        chooseNode: {},
        parentNode: {},
        count: 0,
        type: "",
        tipShow: false,
        clickTip: false,
        currentIndex: -1,
        isEnter: false,
        autoTip: [],
        personList: []
      }
    },
    components: {
      VJstree
    },
    computed: {
      chooseNodePerson() {
        return this.chooseNode.value_2;
      },
    },
    mounted() {
      let self = this;
      self.getLoginUser();
      self.$eventBus.$on("addGongduanTree", function(type, tree) {
        self.treeList = [];
        self.type = type;
        self.count = 0;
        let defaultTree = {
          text: "工段设定",
          value: "工段设定",
          value_1: "",
          opened: true,
          selected: true,
          loading: false,
          edit: false,
          root: 0,
          children: []
        };
        if(tree) {
          defaultTree.children.push(tree);
        }
        self.treeList.push(defaultTree);
        self.chooseNode = defaultTree;
        self.dialogTableVisible = true;
      });
    },
    watch: {
      chooseNodePerson(val) {
        this.currentIndex = -1;
        let autoNames = [];
        if(this.isEnter) {
          this.isEnter = false;
          this.tipShow = false;
          return;
        }
        for(let name of this.personList) {
          if(name.indexOf(val) > -1 && val) {
            autoNames.push(name);
          }
        }
        if(!this.clickTip) {
          this.tipShow = true;
        }
        this.clickTip = false;
        this.autoTip = autoNames;
      },
    },
    methods: {
      closeAllHistory() {
        this.tipShow = false;
        this.currentIndex = -1
      },
      chooseTip(tip) {
        this.chooseNode.value_2 = tip;
        this.tipShow = false;
        this.clickTip = true;
      },
      getLoginUser() {
        let self = this;
        self.personList = [];
        self.$http({
          url: "/autoMonitor/user/queryAllUserDetail",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            for(let data of resp.result) {
              self.personList.push(data.userName)
            }
          }
        });
      },
      selectItem(event) {
        if(this.autoTip.length == 0) {
          return;
        }
        if(event.code == "Enter") {
          this.isEnter = true;
          this.chooseNode.value_2 = this.autoTip[this.currentIndex];
          return;
        }
        let scrollHeight = document.getElementById("scrollElement_q").scrollHeight;
        let height = document.getElementById("scrollElement_q").clientHeight;
        let dis = Math.round((scrollHeight - height) / this.autoTip.length);
        if(event.code == "ArrowDown" && this.currentIndex < this.autoTip.length - 1) {
          this.currentIndex++;
          document.getElementById("scrollElement_q").scrollTop = document.getElementById("scrollElement_q").scrollTop + dis;
        }
        if(event.code == "ArrowUp" && this.currentIndex > 0) {
          document.getElementById("scrollElement_q").scrollTop = document.getElementById("scrollElement_q").scrollTop - dis;
          this.currentIndex--;
        }
      },
      //关闭弹窗
      closeDialog() {
        this.dialogTableVisible = false;
      },
      resetEdit() {
        this.chooseNode.edit = false;
        for(let node of this.chooseNode.children) {
          node.edit = false;
          node.text = node.value + (node.value_1 ? " / " + node.value_1 : "");
        }
        this.chooseNode.text = this.chooseNode.value + (this.chooseNode.value_1 ? " / " + this.chooseNode.value_1 : "");
      },
      editNode() {
        if(this.chooseNode.root != 0) {
          this.chooseNode.edit = true;
        }
      },
      editChildNode(node) {
        node.edit = true;
      },
      addTreeNode() {
        let value = this.chooseNode.root == 0 ? "工段名称" : (this.chooseNode.root == 1 ? "工装名称" : "工序名称");
        let value_1 = this.chooseNode.root == 1 ? "代码" : "";
        let icon = this.chooseNode.root == 0 ? "fa fa-industry" : (this.chooseNode.root == 1 ? "fa fa-university" : "fa fa-tasks");
        let text = value + (value_1 ? " / " + value_1 : "");
        let defaultTree = {
          text: text,
          value: value,
          value_1: value_1,
          value_2: "",
          icon: icon,
          opened: true,
          selected: false,
          loading: false,
          edit: false,
          root: this.chooseNode.root + 1,
          children: []
        };
        this.chooseNode.children.push(defaultTree);
      },
      deleteTreeNode() {
        let self = this;
        if(this.chooseNode.root == 0) {
          this.$notify({
            title: '提示',
            message: "根节点不可删除！",
            type: 'warning'
          });
          return;
        }
        let size = this.chooseNode.children.length;
        if(size > 0) {
          self.$confirm('节点下存在子节点，确定删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let index = self.parentNode.parentItem.indexOf(this.chooseNode);
            self.parentNode.parentItem.splice(index, 1);
            self.chooseNode = self.treeList[0];
            self.chooseNode.selected = true;
            self.$notify({
              title: '提示',
              message: "删除成功！",
              type: 'info'
            });
          });
        } else {
          let index = self.parentNode.parentItem.indexOf(this.chooseNode);
          self.parentNode.parentItem.splice(index, 1);
          self.chooseNode = self.treeList[0];
          self.chooseNode.selected = true;
          self.$notify({
            title: '提示',
            message: "删除成功！",
            type: 'info'
          });
        }
      },
      saveGongduan() {
        let self = this;
        let list = [];
        if(this.treeList[0].children.length > 0) {
          for(let node of this.treeList[0].children) {
            let gd = {
              gqName: node.text,
              gzList: [],
              id: node.id,
              gzId: node.gzId
            };
            for(let gz of node.children) {
              let _gz = {
                name: gz.value,
                code: gz.value_1,
                gxList: [],
                respMan: gz.value_2,
                id: gz.gzId
              };
              for(let gx of gz.children) {
                _gz.gxList.push(gx.text);
              }
              gd.gzList.push(_gz);
            }
            list.push(gd);
          }
          if(this.count == 0) {
            let url = self.type == 'add' ? "/autoMonitor/gd/addGongDuan" : "/autoMonitor/gd/updateGongDuan";
            self.$http({
              url: url,
              method: "post",
              data: JSON.stringify(list),
              dataType: 'json',
              contentType: "application/json"
            }).then(resp => {
              if(resp.success) {
                self.$eventBus.$emit("updateGongQu");
                self.$notify({
                  title: '提示',
                  message: "修改成功！",
                  type: 'success'
                });
                self.closeDialog();
                return
              } else {
                self.$notify({
                  title: '提示',
                  message: resp.message,
                  type: 'error'
                });
              }
              this.count--;
            });
            this.count++;
          }
        } else {
          self.$notify({
            title: '提示',
            message: "请添加工段！",
            type: 'warning'
          });
        }
      },
      itemClick(node) {
        this.chooseNode = node.model;
        this.parentNode = node;
        this.count = 0;
      }
    }
  }
</script>
<style>
  /* 弹性布局Flex 自定义配置(分享)*/
  
  .sq-column {
    display: flex;
    border: solid 1px #cad9f6;
  }
  .sq-colitem-fix {
    flex: 0 1 200px;
    overflow: auto;
    border-right: solid 1px #cad9f6;
    background-color: #f9fafd;
    display: flex;
    flex-direction: column;
  }
  .sq-colitem-fix.fixcol {
    flex: 0 1 40%;
    background-color: #fff;
    flex-direction: row;
  }
  .sq-colitem {
    flex: 1;
    overflow: auto;
    padding: 10px;
  }
  .sq-colitem-fix .fixverti-top {
    flex: 0 1 auto;
    padding: 10px;
    border-bottom: dotted 1px #cad9f6;
  }
  .sq-colitem-fix .fixverti-main {
    flex: 1;
    overflow: auto;
  }
  .sq-colitem-fix .fixcol-side {
    width: auto;
    border-right: solid 1px #ddd;
    flex: none;
    overflow: auto;
    background-color: #f9fafd;
  }
  .sq-colitem-fix .fixcol-content {
    flex: 1;
    overflow: auto;
  }
  .sq-colitem-fix .fixverti-top .bd-ipt-search {
    margin: 0;
  }
  .sq-column.noboder {
    margin: -10px -15px;
  }
  /* 分类选择 */
  
  .list-tab {}
  .list-tab>li a {
    display: block;
    padding: 6px 10px;
    border-bottom: 1px solid #e1eafa;
    margin-bottom: -1px;
    color: #555;
    border-left: solid 4px transparent;
  }
  .list-tab>li a:hover {
    color: #000;
  }
  .list-tab>li.selected a {
    color: #000;
    border-left-color: #4b7bd1;
  }
  .list-tab>li a.disabled {
    pointer-events: none;
    opacity: 0.55;
  }
  /* 已选择对象 */
  
  .classfiy-title {
    background-color: #ecf8ff;
    border-bottom: 1px solid #ecf8ff;
    color: #333;
    margin: -10px -10px 10px;
    padding: 10px;
    font-weight: bold;
    text-align: center;
  }
  .label-list {
    margin-bottom: 15px;
  }
  .label-list h3 {
    margin-bottom: 6px;
    color: #888;
    font-weight: normal;
    font-size: 14px;
  }
  .label-item {
    display: inline-block;
    position: relative;
    margin-right: 4px;
  }
  .label-item span {
    background-color: #f0f5fb;
    border: 1px solid #c2d7f4;
    display: inline-block;
    padding: 2px 6px;
    margin-top: 2px;
  }
  .label-item .fa {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: #00a0e9;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .label-item .fa.fa-remove {
    background-color: #e74c3c;
  }
  .label-item:hover .fa {
    opacity: 1;
  }
  /* 部门级别 */
  
  .list-level {
    margin: 10px;
  }
  .list-level li {
    border-bottom: dotted 1px #ddd;
  }
  .list-level li a {
    display: block;
    padding: 6px 10px 6px 0;
    color: #333;
  }
  .list-level li a:hover {
    background-color: #ecf6fc;
  }
  .list-level li.selected a {
    color: #4b7bd1;
    font-weight: bold;
  }
  .list-level .fti-squ {
    margin-right: 10px;
  }
  .fti-squ {
    background-color: #739ae1;
    width: 3px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }
  .fti-squ:after {
    content: ' ';
    background-color: #888;
    width: 2px;
    height: 10px;
    position: absolute;
    left: 4px;
    top: 2px;
  }
  .search-list-show {
    position: absolute;
    top: 42%;
    left: 51.5%;
    background-color: #fff;
    width: calc(10% - 2px);
    border: 1px solid #e4e4e4;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    height: 30%;
    overflow-y: auto;
    z-index: 999 !important;
  }
  .search-list-show ul {
    padding: 0px;
  }
  .search-list-show li {
    list-style-type: none;
    margin: 10px;
    border-bottom: 1px dashed rgba(0, 128, 255, 0.1);
  }
  .search-list-show li:hover,
  .search-list-show li:focus {
    background-color: rgba(0, 128, 255, 0.1);
  }
  .choose-history .active {
    background-color: #6cc6ec3d;
  }
  .gq_dialog .el-dialog__footer {
    text-align: center;
  }
  .gq_dialog .el-dialog.is-fullscreen {
    height: auto;
    width: 70%;
  }
  .gq_dialog table td {
    padding-left: 20px;
  }
  .gq_dialog input::-webkit-input-placeholder {
    font-size: 12px;
    color: #bcbcbc;
  }
  .gq_dialog table label {
    width: 60px;
    display: inline-block;
    text-align-last: justify
  }
  .gq_dialog .tips {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 10px 0;
    line-height: 1.5em;
  }
  .gq_dialog .tips p {
    font-size: 12px;
    color: #5e6d82;
    margin: 0;
  }
</style>
